<template>
	<view class="content">
		<view class="nav">
			<view class="cont" v-for="(item,index) in arr1" :key="index" @click="select(index,item.text)"
				:class="currentindex==index?'conts':''">
				{{item.text}}
			</view>
		</view>

		<view class="contbox" v-for="(item,index) in arr2" :key="index">
			<view class="ifobox">
				<view class="left">
					<view class="ifo">
						<text class="name">{{item.guard_users.contact}}</text>
						<text class="sex">{{item.guard_users.sex}}</text>
						<text class="phone">{{item.guard_users.contact_number}}</text>
					</view>
					<view class="time">
						<text class="shijian">{{item.time}}</text>
						<text class="shijian">({{item.week}})</text>
						<text class="shijian">{{item.start_time}}</text>
						<text>-</text>
						<text>{{item.end_time}}</text>
					</view>
				</view>
				<view class="right">
					{{state}}
				</view>
			</view>
			<view class="hr"></view>

			<!-- 房源内容 -->
			<view class="details">
				<BaseHouseList :flag="flag" :flags="flags" @selectCallback="selectCallback" :arr="item.arr"
					:type="item.type" @takelook="takelook($event, item)" @clinch="clinch" @failed="failed">
				</BaseHouseList>
			</view>
			<view class="hr"></view>


			<view class="delbtn" v-if="btnbool" @click="deloffer(item.id)">
				取消邀约
			</view>
			<view class="sss" v-if="btnbools">
				<view class="det">
					<view class="imgboxs" @click="erweima(item.id)">
						<image src="https://fangguaner.wm76.mtnet.ren/static/applet/ɨһɨ(1).png" mode=""></image>
						<text>扫码核实</text>
					</view>
				</view>

				<view class="dets" @click="deloffs(item.id)">
					取消邀约
				</view>
			</view>
		</view>

		<!-- 弹框 -->
		<view class="popup" v-if="loadModal">
			<view class="popupbox">
				<view class="record">
					带看记录
				</view>
				<textarea value="" placeholder="请输入带看记录描述" />
				<view class="submit">
					提交
				</view>
			</view>
			<image src="https://fangguaner.wm76.mtnet.ren/static/applet/close_97.png" mode="" class="close"
				@click="close"></image>
		</view>

	</view>
</template>

<script>
	import BaseHouseList from "../../components/BaseHouseList1/index.vue"
	import Basetop from "../../components/Basetop/index.vue"
	import {
		getdeloffer
	} from "../../api/api/index.js"
	import {
		gettakelook
	} from "../../api/api/index.js"

	import tkiQrcode from "../../components/tki-qrcode/tki-qrcode.vue"
	export default {
		data() {

			return {
				follow_up_id: 0,


				// 取消邀约id
				celid: 0,

				loadModal: false,
				flag: true,
				flags: false,
				btnbool: true,
				btnbools: false,
				text: {},
				page: 0,
				limit: 10,
				isOk: false,
				arr1: [{
						text: "邀约中"
					}
					// {
					// 	text: "邀约成功"
					// }
					, {
						text: "带看中"
					}, {
						text: "已带看"
					}, {
						text: "已取消"
					}, {
						text: "邀约失败"
					}
				],
				currentindex: 0,
				state: "邀约中",

				// 房源简介
				arr: [],
				arr2: [],
			}
		},
		methods: {
			qrR() {},
			erweima(id) {
				this.jumpLink({
					link: "/pages/erweima/index",
					query: {
						id: id
					}
				})
			},
			// 审核失败
			failed(item) {
				console.log(item.ids)
				debugger
				this.isOk = false
				this.page = 0
				this.arr2 = []
				this.jumpLink({
					link: "/pages/voucher/index",
					query: {
						guard_house_id: item.id,
						follow_up_id: item.ids,
						type: "fail",
						types: item.type,
						jiaoyi_id: item.jiaoyi_id,
					}
				})
			},
			clinch(item) {
				console.log(item)
				debugger
				this.isOk = false
				this.page = 0
				this.arr2 = []
				this.jumpLink({
					link: "/pages/voucher/index",
					query: {
						guard_house_id: item.id,
						follow_up_id: item.ids,
						moneys: item.price,
						types: item.type
					}
				})
			},
			select: function(index, item) {
				this.state = item
				this.currentindex = index
				this.isOk = false
				this.page = 0
				this.arr2 = []
				if (item == "邀约中") {
					this.btnbool = true
					this.btnbools = false
					this.flags = false
					this.flag = true
				}
				if (item == "邀约成功") {
					this.btnbool = true
					this.btnbools = false
					this.flags = false
					this.flag = true
				}
				if (item == "带看中") {
					this.btnbool = false
					this.btnbools = true
					this.flags = false
					this.flag = true
				}
				if (item == "已带看") {
					this.btnbool = false
					this.btnbools = false
					this.flags = true
					this.flag = false
				}
				if (item == "已取消") {
					this.btnbool = false
					this.btnbools = false
					this.flags = false
					this.flag = false
				}
				if (item == "邀约失败") {
					this.btnbool = false
					this.btnbools = false
					this.flags = false
					this.flag = false
				}
				this.page = 0
				this.isOk = false
				this.datalist()
			},

			selectCallback(item) {},
			takelook(item, v) {
				this.isOk = false
				this.page = 0
				this.arr2 = []
				this.jumpLink({
					link: "/pages/record/index",
					query: {
						id: item.id,
						houseid: v.id
					}
				})

			},

			close() {
				this.loadModal = false
			},


			// 取消邀约
			deloffer(id) {
				let data = {
					id: id
				}
				let that = this
				getdeloffer(data).then(res => {
					that.page = 0
					that.isOk = false
					that.arr2 = []
					that.datalist()
					uni.showToast({
						title: "取消成功",
						icon: "none",
						duration: 1000
					})
				})
			},
			deloffs(id) {
				let that = this

				getdeloffer({
					id: id
				}).then(res => {
					that.page = 0
					that.isOk = false
					that.datalist()
					uni.showToast({
						title: "取消成功",
						icon: "none",
						duration: 1000
					})
				})
			},
			//接口函数
			datalist() {
				if (this.isOk) {
					return uni.showToast({
						icon: 'none',
						title: '没有更多了'
					})
				}
				uni.showLoading({
					mask: true,
					title: '加载中'
				})
				this.page++
				let data = {
					page: this.page,
					limit: this.limit,
					type: this.state
				}
				gettakelook(data).then(res => {
					uni.hideLoading()
					this.arr2 = this.arr2.concat(res.data)
					this.arr = res.data.map(v => {
						this.follow_up_id = v.id
						v.arr = v.guard_hous_id.map(item => {
							item.ids = v.id
							item.img = item.image
							item.title = item.name
							item.area = item.cover_area
							return item
						})
						return v
					})
					if (res.data.length < this.limit) {
						this.isOk = true
					}
				})
			}
		},
		components: {
			BaseHouseList,
			Basetop,
			tkiQrcode
		},
		onShow() {
			this.page = 0
			this.isOk = false
			this.arr2 = []
			this.datalist()
		},
		onReachBottom() {
			this.datalist()
		},
		onPullDownRefresh() {
			this.page = 0
			this.isOk = false
			this.arr2 = []
			this.datalist()
		}

	}
</script>

<style scoped lang="scss">

	.popup {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 104rpx;
		left: 0;
		margin: 246rpx auto;
		width: 658rpx;
		height: 629rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		font-family: MicrosoftYaHei;
		font-size: 30rpx;
		box-shadow: 0 0 0rpx 2000rpx rgba(0, 0, 0, 0.5);
		color: #000000;
		z-index: 9999;

		.popupbox {
			width: 100%;
			height: 100%;
			position: relative;

			.record {
				text-align: center;
				font-family: MicrosoftYaHei;
				font-size: 30rpx;
				color: #000000;
				margin-top: 36rpx;
			}

			textarea {
				padding: 10rpx;
				box-sizing: border-box;
				margin-top: 75rpx;
				margin-left: 22rpx;
			}

			.submit {
				width: 658rpx;
				height: 100rpx;
				background-color: #ef0000;
				font-family: MicrosoftYaHei;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 100rpx;
				text-align: center;
				// margin-top: 65rpx;
				position: absolute;
				bottom: 0;
				border-bottom-left-radius: 10rpx;
				border-bottom-right-radius: 10rpx;
			}
		}

		.close {
			width: 55rpx;
			height: 54rpx;
			z-index: 100000;
			position: absolute;
			top: 650rpx;
			left: 300rpx;
		}
	}




	.content {
		background-color: #EDEDED;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		position: relative;
	}

	.nav {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 21rpx;
		box-sizing: border-box;
		width: 100%;
		background-color: #FFFFFF;
	}

	.cont {
		width: 114rpx;
		height: 54rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		font-size: 24rpx;
		line-height: 54rpx;
		text-align: center;
	}

	.conts {
		color: #FFFFFF;
		background-color: #E32D24;
	}

	/* 用户信息 */
	.contbox {
		background-color: #FFFFFF;
		margin: 10rpx;
		box-shadow: 3rpx 4rpx 7rpx 0rpx rgba(180, 180, 180, 0.46);
		border-radius: 10rpx;
		padding: 42rpx 31rpx 28rpx 26rpx;
		box-sizing: border-box;
	}


	/* 房源信息 */
	.contents {
		display: flex;
		margin-left: 20rpx;
		margin-top: 44rpx;
	}

	.tu {
		width: 208rpx;
		height: 169rpx;
		border-radius: 10rpx;
	}

	.contents>.brief {
		margin-left: 35rpx;
		width: 400rpx;
	}

	.brief>.title {
		font-size: 28rpx;
		color: #282828;
		font-family: MicrosoftYaHei-Bold;
		font-weight: 700;
		font-stretch: normal;
	}

	.brief>.area {
		font-size: 22rpx;
		color: #878787;
		font-family: MicrosoftYaHei-Bold;
		margin-top: 10rpx;
	}

	.lablebox {
		display: flex;
		margin-top: 18rpx;
	}

	.labeone {
		width: 71rpx;
		height: 31rpx;
		text-align: center;
		line-height: 31rpx;
		border-radius: 16rpx;
		background-color: #ffdddc;
		font-size: 18rpx;
		display: inline-block;
		color: rgb(210, 73, 89);
	}

	.labletwo {
		display: inline-block;
		width: 102rpx;
		height: 31rpx;
		text-align: center;
		line-height: 31rpx;
		border-radius: 16rpx;
		background-color: #ffefdc;
		font-size: 18rpx;
		color: #d88e35;
		margin-left: 7rpx;
	}

	.lablethree {
		display: inline-block;
		width: 102rpx;
		height: 31rpx;
		text-align: center;
		line-height: 31rpx;
		background-color: #dcf8ff;
		border-radius: 16rpx;
		font-size: 18rpx;
		color: #33b1d0;
		margin-left: 7rpx;
	}

	.pricebox {
		display: flex;
		margin-top: 10rpx;
	}

	.total {
		color: #e13c35;
		font-size: 18rpx;
		font-family: MicrosoftYaHei;
	}

	.total>text {
		font-size: 30rpx;
		font-weight: 700;
		font-family: PingFang-SC-Heavy;
		margin-right: 10rpx;
	}

	.price {
		font-size: 20rpx;
		font-family: MicrosoftYaHei;
		color: #666666;
		margin-left: 34rpx;
		margin-top: 12rpx;
	}





	.more {
		text-align: center;
		font-family: MicrosoftYaHei;
		font-size: 24rpx;
		color: #2f2f2f;
		margin-top: 45rpx;
	}

	.delbtn {
		width: 200rpx;
		height: 61rpx;
		background-color: #ffffff;
		border-radius: 31rpx;
		border: solid 3rpx #df4744;
		line-height: 61rpx;
		color: #ce2e2b;
		font-family: MicrosoftYaHei;
		font-size: 26rpx;
		margin-left: 428rpx;
		margin-top: 36rpx;
		text-align: center;
	}

	.hr {
		height: 1rpx;
		margin-top: 34rpx;
		background-color: #e0e0e0;

	}

	.del {
		display: flex;
		align-items: center;
		margin-left: 29rpx;
	}

	.delbtn image {
		width: 34rpx;
		height: 34rpx;
		margin-right: 19rpx;
	}

	.sss {
		display: flex;
		margin-left: 225rpx;
		margin-top: 36rpx;
	}

	.sss .dets {
		width: 200rpx;
		height: 61rpx;
		line-height: 60rpx;
		text-align: center;
		background-color: #FFFFFF;
		border-radius: 31rpx;
		border: solid 3rpx #df4744;
		color: #ce2e2b;
		margin-left: 50rpx;
	}

	.sss .det {
		width: 200rpx;
		height: 61rpx;
		line-height: 60rpx;
		text-align: center;
		background-color: #FFFFFF;
		border-radius: 31rpx;
		border: solid 3rpx #df4744;
		color: #ce2e2b;
		font-size: 26rpx;
	}

	.det .imgboxs {
		display: flex;
		align-items: center;
		margin-left: 29rpx
	}

	.det .imgboxs image {
		width: 34rpx;
		height: 34rpx;
	}

	.det .imgboxs text {
		font-size: 26rpx;
		margin-left: 19rpx;
	}





	.ifobox {
		display: flex;
		justify-content: space-between;
	}

	.name {
		font-size: 30rpx;
		font-family: MicrosoftYaHei-Bold;
		color: #000000;
	}

	.sex {
		font-size: 22rpx;
		color: #666666;
		font-family: MicrosoftYaHei-Bold;
		margin-left: 20rpx;
	}

	.phone {
		font-size: 22rpx;
		color: #666666;
		font-family: MicrosoftYaHei-Bold;
		margin-left: 20rpx;
	}

	.right {
		font-size: 26rpx;
		color: #d72f2c;
		font-family: MicrosoftYaHei;
		margin-top: 20rpx;
	}

	.time {
		font-size: 24rpx;
		color: #000000;
		font-family: MicrosoftYaHei;
		margin-top: 31rpx;
	}

	.time>.shijian {
		margin-left: 10rpx;
	}
</style>
